{extend name="layout/dialog" /}

{block name="content"}
<div class="panel panel-default">
    <div class="panel-heading">
        {:__('Assign Permission to Employees')}
    </div>
    <div class="panel-body">
        <form id="employee-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('permission/employees')}">
            <input type="hidden" name="permission_id" value="{$permission.id}">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Permission')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="form-control-static">
                        {$permission.name} ({$permission.code})
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Data Scope')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <select name="data_scope" class="form-control selectpicker">
                        {foreach name="dataScopeList" item="name" key="value"}
                            <option value="{$value}">{$name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Department')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <select id="department-select" class="form-control selectpicker">
                        <option value="0">{:__('All Departments')}</option>
                        {foreach name="departmentList" item="dept"}
                            <option value="{$dept.id}">{$dept.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Employees')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <select name="employee_ids[]" id="employee-select" class="form-control selectpicker" multiple data-live-search="true">
                        {foreach name="employeeList" item="employee"}
                            <option value="{$employee.id}" data-dept="{$employee.department_id}" {in name="employee.id" value="$selectedEmployees"}selected{/in}>
                                {$employee.name} ({$employee.department.name})
                            </option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="form-group layer-footer">
                <label class="control-label col-xs-12 col-sm-2"></label>
                <div class="col-xs-12 col-sm-8">
                    <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
                    <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                </div>
            </div>
        </form>
    </div>
</div>
{/block}

{block name="script"}
<script>
    $(function () {
        Form.api.bindevent($('#employee-form'));
        
        // 部门筛选员工
        $('#department-select').on('change', function() {
            var deptId = $(this).val();
            
            if (deptId == 0) {
                $('#employee-select option').show();
            } else {
                $('#employee-select option').each(function() {
                    var employeeDeptId = $(this).data('dept');
                    if (employeeDeptId == deptId) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            }
            
            $('#employee-select').selectpicker('refresh');
        });
    });
</script>
{/block} 